<template>
    <div class="couponList">
      
        <!-- 左 -->
        <div class="listLeft">
            <p>{{itemData.p1}}</p>
            <span class="reduction">{{itemData.txt}}</span>
        </div>
        <!-- 右 -->
        <div class="listRight">
            <h4 class="title">{{itemData.title}}</h4>
            <p class="text"><img :src="itemData.img" alt="">{{itemData.text}}</p>
            <p class="text"><img :src="itemData.image" alt="">{{itemData.message}}</p>
            <!-- <div class="circle" v-if="itemData.state != '未使用'">{{itemData.state}}</div> -->
            <div class="circle" v-if="itemData.state != '未使用'">{{showState}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name:'CouponItem',
    data:function(){
        return {      
        }   
    },
    props: ['itemData'],
    computed: {
        showState() {
            switch(this.itemData.state) {
                case '未使用': {
                    return '未使用';
                }
                case '已使用': {
                    return '已使用';
                }
                case '已过期': {
                    return '已过期';
                }
                default: {
                    return 'budui'
                }
            }
        }
    },
    
}
</script>

<style socpe>
    *{
        margin:0;
        padding:0
    }

    .clear::before,
    .clear::after{
        content:'';
        display:table;
    }

    .clear::after{
        clear:both;
    }
    .couponList{
       margin-left: auto;
       margin-right: auto;
    }

    .listLeft{
        width:100px;
        height: 90px;
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        margin: 14px 0 10px 10px;
    }

    .listLeft p{
        font-size: 20px;
        font-weight: 500;
        margin-top:  10px;
        margin-bottom: 6px;
    }

    .reduction{
        font-size: 16px;
        color:white ;
        margin-bottom: 8px;
    }
   

    .listRight{
        width:240px;
        height: 90px;
        /* border: 1px solid rgb(60, 59, 59); */
        margin: 14px 8px 10px 0px;
        text-align: left;
        position: relative;
        
    }

    .listLeft,
    .listRight{
        float: left;
        border-radius: 5px;
        background-color:#fb9c2fd2 ;
        color: white;
        border: none;
    }

   .listRight img{
       width: 16px;
       height: 16px;
       margin-right: 6px;
   }

    /* .title,
    .text,
    .circle{
        padding-top: 4px;
        padding-left:10px;
        padding-bottom: 4px;
    } */

    .title,
    .text{
        margin-left: 34px;
        margin-top: 6px;
    }
    .text,
    .circle{
        font-size: 12px;
        color:#484747d2 ;
    }

   .circle{
       position: absolute;
       top: 10px;
       right: 10px;
       width: 40px;
       height: 40px;
       line-height: 40px;
       text-align: center;
       font-size: 10px;
       color: rgba(42, 36, 36, 0.787);
       border-radius: 30px;
       padding: 6px;
       background-color: rgba(255, 255, 255, 0.5);
       
   }
</style>